import { useFetch } from '@/pages/OrderModule/common/hooks/useFetch';
import { DoubleLeftOutlined } from '@ant-design/icons';
import { Collapse, Select } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import IconFont from '@/components/IconFont';
import Style from '../../index.module.less';
import { useFilterFieldsConfig } from '../../store';
import FieldWrapper from '../FieldWrapper';
import { queryExpressList } from './server';
import {expressItem, orderTypeFilterItem} from '@/pages/OrderModule/orderList/components/Filter/constant.js';

const { Panel } = Collapse;

/**
 * @desc: 筛选框：快递公司组件
 */
export const Express = ({ value = {}, onChange }) => {
  const { loading, data: resp, fetch: fetchExpressList } = useFetch(queryExpressList, {}, false);

  const { checkingMap } = useFilterFieldsConfig();

  useEffect(() => {
    fetchExpressList({ type: 1 });
  }, []);

  // 快递公司列表
  const companyList = useMemo(() => {
    if (resp && resp.data) {
      return [{ label: '无快递', value: -9999 }].concat(resp?.data?.map((item) => ({ label: item.baseExpressName, value: item.baseExpressId })));
    } else {
      return [{ label: '无快递', value: -9999 }];
    }
  }, [resp]);
  const [selectPriceType, setSelectPriceType] = useState('1');

  const triggerChange = (changedValue) => {
    onChange?.({
      ...value,
      ...changedValue,
    });
  };

  // 物流状态下拉option
  const expressStatusOptions = [
    {
      label: '无运单号',
      value: '0',
    },
    {
      label: '已获取运单号',
      value: '1',
    },
    {
      label: '正在获取运单号',
      value: '2',
    },
    {
      label: '运单号不足',
      value: '3',
    },
    {
      label: '接口报错',
      value: '4',
    },
    {
      label: '寄件人为空',
      value: '5',
    },
    {
      label: '未设置面单获取平台',
      value: '6',
    },
    {
      label: '运单号已取消',
      value: '12',
    },
  ];

  // 物流回传下拉option
  const expressBackOptions = [
    // [0:未回传 1:已回传 2:回传失败 3:待回传(已提交回传)]
    {
      label: '未回传',
      value: '0',
    },
    {
      label: '已回传',
      value: '1',
    },
    {
      label: '回传失败',
      value: '2',
    },
    {
      label: '待回传(已提交回传)',
      value: '3',
    },
  ];
  if(Object.values(expressItem).every(item => checkingMap[item] === false)) {
    return <div style={{marginBottom: -6}}/>
  }
  return (
    <Collapse
      bordered={false}
      defaultActiveKey={['express']}
      expandIcon={({ isActive }) => (
          <DoubleLeftOutlined rotate={isActive ? 270 : 90} style={{ fontSize: '16px', color: '#4E5969' }} />)}
      expandIconPosition="end"
      className={Style['filter-item-collapse']}
    >
      <Panel header="快递公司" key="express" className={Style['filter-item-collapse-panel']}>
        {/** 快递公司 */}
        {checkingMap.logisticsCompanyId && (
          <FieldWrapper>
            <Select
              showSearch
              mode='multiple'
              options={companyList}
              placeholder="请选择快递公司"
              optionFilterProp="label"
              allowClear
              value={value.logisticsCompanyId}
              onChange={(v) => triggerChange({ logisticsCompanyId: v })}
              clearIcon={<IconFont type="iconguanbi2fill" style={{fontSize:'14px'}} />}
            ></Select>
          </FieldWrapper>
        )}

        {/** 物流状态 */}
        {checkingMap.logisticsErrorType && (
          <FieldWrapper>
            <Select
              value={value.logisticsErrorType}
              placeholder="物流状态"
              allowClear
              options={expressStatusOptions}
              onChange={(v) => triggerChange({ logisticsErrorType: v })}
              clearIcon={<IconFont type="iconguanbi2fill" style={{fontSize:'14px'}} />}
            ></Select>
          </FieldWrapper>
        )}

        {/** 物流回传 */}
        {checkingMap.callbackFlag && (
          <FieldWrapper>
            <Select value={value.callbackFlag} placeholder="物流回传" allowClear options={expressBackOptions} 
              onChange={(v) => triggerChange({ callbackFlag: v })}
              clearIcon={<IconFont type="iconguanbi2fill" style={{fontSize:'14px'}} />}
            ></Select>
          </FieldWrapper>
        )}
      </Panel>
    </Collapse>
  );
};

export default Express;
